<template>
    <div class="week">
        <div class="export-setting">
            <h3>导出设置</h3>
            <div class="time-setting">
                <div class="title">选择时间范围:
                    &nbsp;&nbsp;&nbsp;

                    <el-date-picker 
                        v-model="weekDate" 
                        style="width:320px" 
                        size="mini" type="week" 
                        :format="timeText" 
                        placeholder="选择周" 
                        :picker-options="pickerOptions"
                        @change="timeChange"
                    ></el-date-picker>

                </div>
            </div>

            <div class="record-info">共计 <span>{{total}}</span> 条记录，支持导出格式为：pdf</div>
            <div class="export-btn">
                <el-button 
                type="primary" 
                size="small" 
                :disabled="loading" 
                v-czc="['数据报表', '点击按钮' , '导出周报', 0 ,'dataExport-btn-exportWeek']"
                @click="exportClick" 
                >
                    导出
                </el-button>
            </div>
        </div>

        <div class="export-footer">
            <h3>导出内容示例</h3>
            <img src="/images/tool/week.jpg" alt="">
        </div>

    </div>
</template>

<script>
import { mapActions } from 'vuex';
import dialogWaitList from '@js/dialog-wait-list.js';
import tool from '../mixins/tool';

export default {
    head: {},
    components: {},
    mixins: [tool],
    props: {
        typeName: {
            type: String,
            default: '',
        },
        num: {
            type: [String, Number],
            default: 0,
        },
        unit: {
            type: String,
            default: '条',
        },
        code:{
            type: String,
            default: ""
        },
    },
    data() {
        return {
            loading: false,
            pgData: {
                startDate: '',
                endDate: '',
                isExport: false,
            },

            weekDate: '', //清这个
            montnList: [
                { value: 'Jan', key: '01' },
                { value: 'Feb', key: '02' },
                { value: 'Mar', key: '03' },
                { value: 'Apr', key: '04' },
                { value: 'May', key: '05' },
                { value: 'Jun', key: '06' },
                { value: 'Jul', key: '07' },
                { value: 'Aug', key: '08' },
                { value: 'Sep', key: '09' },
                { value: 'Oct', key: '10' },
                { value: 'Nov', key: '11' },
                { value: 'Dec', key: '12' },
            ],
            timeText: '',
            total: 0,
            pickerOptions: {
                firstDayOfWeek: 1,
                disabledDate(time) {
                    let jend = '2016-09-24 00:00';
                    let cTime = new Date(jend).getTime();
                    let startTimestamp = new Date(time).getTime();
                    if (startTimestamp < cTime) return true;
                },
            },
        };
    },

    computed: {},
    watch: {},

    methods: {
        ...mapActions({
            queryStatisticData: 'userinfo/queryStatisticData',
        }),
        getDataList: function () {
            this.loading = true;
            this.$get(`${this.$store.state.api.tbUrl}/dateExport/projectWeekly`, this.pgData, (data, res) => {
                this.total = data.total;
                this.loading = false;
            });
        },

        exportData() {
            if (!this.pgData.startDate) {
                return ShowMsg('选择时间后进行导出', 'warning');
            }
            if (this.total == 0) {
                return ShowMsg('共计 0 条记录,暂不支持导出', 'warning');
            }

            ShowConfirm('是否导出当前数据信息', 'warning', () => {
                let newObj = clone(this.pgData);
                newObj.isExport = true;

                var search = toSearch(newObj);
                downloader(`${this.$store.state.api.tbUrl}/dateExport/projectWeekly${search}`);
                this.useNums('ZB');
                return ShowMsgBox('导出成功，即将自动下载附件，请勿关闭页面', 'success');
            });
        },

        timeChange: function (e) {
            if (!!e) {
                let needConvertTime = this.timeConvert(e);
                
                let startTimestamp = new Date(needConvertTime).getTime() - 24 * 60 * 60 * 1000;
                let endTimestamp = new Date(needConvertTime).getTime() + 5 * 24 * 60 * 60 * 1000;

                //现在以后。

                this.pgData.startDate = this.timeConvert(new Date(startTimestamp));
                this.pgData.endDate = this.timeConvert(new Date(endTimestamp));
                this.timeText = this.pgData.startDate + ' - ' + this.pgData.endDate;

                this.getDataList();
            } else {
                this.pgData.startDate = '';
                this.pgData.endDate = '';
                this.timeText = '';
                this.total = 0;
            }
        },
        timeConvert: function (val) {
            let timeArr = val.toString().split(' ');
            let moonthObj = this.montnList.filter((item) => {
                return item.value == timeArr[1];
            });
            let year = timeArr[3];
            let month = moonthObj[0].key;
            let day = timeArr[2];
            return year + '-' + month + '-' + day;
        },
    },
    created() {},
    mounted() {
        // 获取服务权限次数
        this.queryStatisticData(arr => {
            var service = arr.filter(item => item.code === 'ZB'),
                remain = service[0].surplus;

            if (remain <= 0 || !remain) {
                // 没次数
                return;
            }

            // 在列队中注册-分享引导登录
            dialogWaitList.push(() => {
                this.$alert(`您有${remain}次导出周报的次数，点击导出只消耗1次`, '提示', {
                    confirmButtonText: '确定',
                    type: 'success',
                }).then(() => {
                    dialogWaitList.next();
                });
            }, 4);

            
        });
    },
};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';
.week {
    .export-setting {
        margin-top: 15px;
        .re-span {
            font-size: 14px;
            color: #999;
        }

        .time-setting {
            margin-top: 20px;
            font-weight: 600;
        }
        .record-info {
            margin-top: 1em;
            font-size: 12px;
        }
        .export-btn {
            display: flex;
            justify-content: center;
            margin-top: 80px;
            margin-bottom: 40px;

            .el-button {
                width: 105px;
            }
        }
    }

    .export-footer {
        margin-top: 20px;

        img {
            display: block;
            width: 50%;
            margin: 15px auto 0;
        }
    }
}
</style>
